Cypress: Galvenais ceļvedis pilna cikla (End-to-End) testēšanai tīmekļa lietojumprogrammām

Mūsdienu strauji mainīgajā tīmekļa izstrādes vidē ir ļoti svarīgi nodrošināt tīmekļa lietojumprogrammu kvalitāti un uzticamību. Pilna cikla (End-to-End - E2E) testēšana spēlē būtisku lomu, pārbaudot, vai visi lietojumprogrammas komponenti darbojas nevainojami no lietotāja perspektīvas. Cypress ir kļuvis par vadošo E2E testēšanas sistēmu, piedāvājot izstrādātājiem draudzīgu pieredzi, jaudīgas funkcijas un izcilu veiktspēju. Šis visaptverošais ceļvedis iepazīstinās jūs ar visu, kas jums jāzina, lai sāktu darbu ar Cypress un efektīvi testētu savas tīmekļa lietojumprogrammas.

Kas ir Cypress?

Cypress ir nākamās paaudzes front-end testēšanas rīks, kas izstrādāts modernam tīmeklim. Atšķirībā no tradicionālajām testēšanas sistēmām, kas izpilda testus pārlūkprogrammā, Cypress darbojas tieši pārlūkprogrammā, nodrošinot nepārspējamu kontroli un ieskatu jūsu lietojumprogrammas darbībā. Tas ir izstrādāts, lai būtu ātrs, uzticams un viegli lietojams, padarot to par populāru izvēli izstrādātāju un QA inženieru vidū visā pasaulē. Cypress ir rakstīts JavaScript un darbojas pārlūkprogrammā, padarot to ļoti efektīvu un nodrošinot nepārspējamu piekļuvi lietojumprogrammas iekšējiem procesiem.

Galvenās Cypress lietošanas priekšrocības

• Izstrādātājiem draudzīgs: Cypress nodrošina tīru un intuitīvu API, padarot testu rakstīšanu un atkļūdošanu vienkāršu.
• Laika ceļojums: Cypress uzņem momentuzņēmumus par jūsu lietojumprogrammas stāvokli katra testa komandas laikā, ļaujot jums atgriezties laikā un precīzi redzēt, kas notika jebkurā brīdī.
• Reāllaika pārlādēšana: Cypress automātiski pārlādējas, kad veicat izmaiņas savos testos, nodrošinot tūlītēju atgriezenisko saiti.
• Automātiska gaidīšana: Cypress automātiski gaida, līdz elementi kļūst redzami vai interaktīvi pirms darbību veikšanas, novēršot nepieciešamību pēc skaidras gaidīšanas.
• Tīkla kontrole: Cypress ļauj jums izmantot tīkla pieprasījumu un atbilžu imitāciju (stubbing), ļaujot simulēt dažādus scenārijus un testēt jūsu lietojumprogrammas kļūdu apstrādi.
• Atkļūdojamība: Cypress nodrošina izcilus atkļūdošanas rīkus, tostarp jaudīgu atkļūdotāju (debugger) un detalizētus kļūdu ziņojumus.
• Daudz pārlūkprogrammu testēšana: Cypress atbalsta vairākas pārlūkprogrammas, tostarp Chrome, Firefox, Edge un Electron.
• Headless testēšana: Izpildiet testus headless režīmā ātrākai izpildei CI/CD vidēs.
• Iebūvēti apgalvojumi: Cypress nodrošina bagātīgu iebūvētu apgalvojumu kopumu, lai pārbaudītu jūsu lietojumprogrammas paredzamo darbību.

Instalēšana un iestatīšana

Sākt darbu ar Cypress ir vienkārši. Lūk, kā to instalēt:

1. Priekšnosacījumi: Pārliecinieties, ka jūsu sistēmā ir instalēts Node.js un npm (Node Package Manager). Jūs varat tos lejupielādēt no oficiālās Node.js vietnes.
2. Instalējiet Cypress: Atveriet savu termināli vai komandrindas logu, pārejiet uz savu projektu direktoriju un izpildiet šādu komandu:

            npm install cypress --save-dev
            

              
                Copy
              
            
          

3. Atveriet Cypress: Kad instalēšana ir pabeigta, varat atvērt Cypress Test Runner, izpildot:

            npx cypress open
            

              
                Copy
              
            
          

Šī komanda palaidīs Cypress Test Runner, kas nodrošina grafisko saskarni jūsu testu izpildei un atkļūdošanai.

Savu pirmo Cypress testu rakstīšana

Izveidosim vienkāršu testu, lai pārbaudītu, vai vietnes sākumlapa tiek pareizi ielādēta. Izveidojiet jaunu failu ar nosaukumu `example.cy.js` savā projektā esošajā `cypress/e2e` direktorijā.

            
// cypress/e2e/example.cy.js

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

            

              
                Copy
              
            
          

Izskaidrosim šo testu:

• `describe()`: Definē testu kopu (test suite), kas ir saistītu testu kolekcija.
• `it()`: Definē individuālu testa gadījumu testu kopā.
• `cy.visit()`: Navigē uz norādīto URL.
• `cy.contains()`: Atrod elementu, kas satur norādīto tekstu.
• `.click()`: Noklikšķina uz izvēlētā elementa.
• `cy.url()`: Iegūst pašreizējo lapas URL.
• `.should()`: Izsaka apgalvojumu par lietojumprogrammas stāvokli.
• `cy.get()`: Izvēlas elementu, izmantojot CSS selektoru.
• `.type()`: Ieraksta tekstu izvēlētajā elementā.
• `.should('have.value', 'fake@email.com')`: Apgalvo, ka elementa vērtība ir vienāda ar 'fake@email.com'.

Izpildiet šo testu Cypress Test Runner, lai redzētu to darbībā. Jums vajadzētu redzēt, kā pārlūks navigē uz Cypress Kitchen Sink vietni, noklikšķina uz saites "type" un pārbauda URL.

Cypress komandas

Cypress nodrošina plašu komandu klāstu mijiedarbībai ar jūsu lietojumprogrammu. Šeit ir dažas no visbiežāk izmantotajām komandām:

• `cy.visit(url)`: Navigē uz norādīto URL.
• `cy.get(selector)`: Izvēlas elementu, izmantojot CSS selektoru.
• `cy.contains(content)`: Izvēlas elementu, kas satur norādīto tekstu.
• `cy.click()`: Noklikšķina uz izvēlētā elementa.
• `cy.type(text)`: Ieraksta tekstu izvēlētajā elementā.
• `cy.clear()`: Notīra ievades vai teksta lauka saturu.
• `cy.submit()`: Iesniedz veidlapu.
• `cy.check()`: Atzīmē izvēles rūtiņu vai radio pogu.
• `cy.uncheck()`: Noņem atzīmēšanu no izvēles rūtiņas.
• `cy.select(value)`: Izvēlas opciju no nolaižamā saraksta.
• `cy.scrollTo(position)`: Ritina lapu uz norādīto pozīciju.
• `cy.trigger(event)`: Izsauc DOM notikumu uz izvēlētā elementa.
• `cy.request(url, options)`: Veic HTTP pieprasījumu uz norādīto URL.
• `cy.intercept(route, handler)`: Pārtver HTTP pieprasījumus, kas atbilst norādītajam maršrutam.
• `cy.wait(time)`: Gaida norādīto laika periodu.
• `cy.reload()`: Pārlādē pašreizējo lapu.
• `cy.go(direction)`: Navigē uz iepriekšējo vai nākamo lapu pārlūkprogrammas vēsturē.
• `cy.url()`: Iegūst pašreizējo lapas URL.
• `cy.title()`: Iegūst lapas virsrakstu.
• `cy.window()`: Iegūst loga objektu.
• `cy.document()`: Iegūst dokumenta objektu.
• `cy.viewport(width, height)`: Iestata skata apgabala (viewport) izmēru.

Šīs ir tikai dažas no daudzajām Cypress pieejamajām komandām. Apskatiet Cypress dokumentāciju, lai iegūtu pilnu komandu sarakstu un to opcijas.

Apgalvojumi (Assertions) Cypress

Apgalvojumi tiek izmantoti, lai pārbaudītu jūsu lietojumprogrammas paredzēto darbību. Cypress nodrošina bagātīgu iebūvētu apgalvojumu kopumu, ko varat izmantot, lai pārbaudītu elementu stāvokli, URL, virsrakstu un daudz ko citu. Apgalvojumi tiek ķēdēti pēc Cypress komandām, izmantojot metodi `.should()`.

Šeit ir daži izplatīti apgalvojumu piemēri:

• `.should('be.visible')`: Apgalvo, ka elements ir redzams.
• `.should('not.be.visible')`: Apgalvo, ka elements nav redzams.
• `.should('be.enabled')`: Apgalvo, ka elements ir iespējots.
• `.should('be.disabled')`: Apgalvo, ka elements ir atspējots.
• `.should('have.text', 'expected text')`: Apgalvo, ka elementam ir norādītais teksts.
• `.should('contain', 'expected text')`: Apgalvo, ka elements satur norādīto tekstu.
• `.should('have.value', 'expected value')`: Apgalvo, ka elementam ir norādītā vērtība.
• `.should('have.class', 'expected class')`: Apgalvo, ka elementam ir norādītā klase.
• `.should('have.attr', 'attribute name', 'expected value')`: Apgalvo, ka elementam ir norādītais atribūts un vērtība.
• `.should('have.css', 'css property', 'expected value')`: Apgalvo, ka elementam ir norādīta CSS īpašība un vērtība.
• `.should('have.length', expected length)`: Apgalvo, ka elementam ir norādītais garums (piemēram, elementu skaits sarakstā).

Jūs varat arī izveidot pielāgotus apgalvojumus, lai tie atbilstu jūsu specifiskajām vajadzībām.

Labākā prakse Cypress testu rakstīšanai

Labākās prakses ievērošana var palīdzēt jums rakstīt vairāk uzturējamus, uzticamus un efektīvus Cypress testus. Šeit ir daži ieteikumi:

• Rakstiet skaidrus un kodolīgus testus: Katram testam jākoncentrējas uz konkrētu funkcionalitāti vai scenāriju. Izvairieties rakstīt pārmērīgi sarežģītus testus, kurus ir grūti saprast un uzturēt.
• Izmantojiet jēgpilnus testu nosaukumus: Piešķiriet saviem testiem aprakstošus nosaukumus, kas skaidri norāda, ko tie testē.
• Izvairieties no cieti kodētiem (hardcoded) vērtībām: Izmantojiet mainīgos vai konfigurācijas failus, lai saglabātu vērtības, kas var mainīties laika gaitā.
• Izmantojiet pielāgotas komandas: Izveidojiet pielāgotas komandas, lai iepakotu atkārtoti lietojamu loģiku un padarītu jūsu testus lasāmākus.
• Izolējiet testus: Katram testam jābūt neatkarīgam no citiem testiem. Izvairieties paļauties uz lietojumprogrammas stāvokli no iepriekšējiem testiem.
• Tīriet pēc testiem: Katra testa beigās atiestatiet lietojumprogrammas stāvokli, lai nodrošinātu, ka turpmākie testi sākas no tīras lapas.
• Izmantojiet datu atribūtus: Izmantojiet datu atribūtus (piemēram, `data-testid`) elementu izvēlei savos testos. Datu atribūti mazāk mainās nekā CSS klases vai ID, padarot jūsu testus izturīgākus pret izmaiņām UI.
• Izvairieties no skaidrām gaidīšanas: Cypress automātiski gaida, līdz elementi kļūst redzami vai interaktīvi. Izvairieties izmantot skaidras gaidīšanas (piemēram, `cy.wait()`), ja vien tas nav absolūti nepieciešams.
• Testējiet lietotāju plūsmas: Koncentrējieties uz lietotāju plūsmu testēšanu, nevis atsevišķiem komponentiem. Tas palīdzēs jums nodrošināt, ka jūsu lietojumprogramma darbojas pareizi no lietotāja perspektīvas.
• Regulāri izpildiet testus: Integrējiet Cypress testus savā CI/CD cauruļvadā un izpildiet tos regulāri, lai agrīnā izstrādes procesā atklātu kļūdas.

Papildu Cypress tehnikas

Imitācija (Stubbing) un izspiegošana (Mocking)

Cypress ļauj jums imitēt tīkla pieprasījumus un atbildes, ļaujot simulēt dažādus scenārijus un testēt jūsu lietojumprogrammas kļūdu apstrādi. Tas ir īpaši noderīgi, lai testētu funkcijas, kas paļaujas uz ārējiem API vai pakalpojumiem.

Lai imitētu tīkla pieprasījumu, varat izmantot komandu `cy.intercept()`. Piemēram, zemāk esošais kods imitē GET pieprasījumu uz `/api/users` un atgriež izspoguļotu (mock) atbildi:

            
cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

            

              
                Copy
              
            
          

Pēc tam jūs varat gaidīt pārtverto pieprasījumu, izmantojot `cy.wait('@getUsers')`, un pārbaudīt, vai jūsu lietojumprogramma pareizi apstrādā izspoguļoto atbildi.

Darbs ar lokālo krātuvi (Local Storage) un sīkdatnēm (Cookies)

Cypress nodrošina komandas mijiedarbībai ar lokālo krātuvi un sīkdatnēm. Jūs varat izmantot šīs komandas, lai iestatītu, iegūtu un notīrītu lokālo krātuvi un sīkdatnes savos testos.

Lai iestatītu lokālās krātuves elementu, varat izmantot komandu `cy.window()`, lai piekļūtu loga objektam un pēc tam izmantotu metodi `localStorage.setItem()`. Piemēram:

            
cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

            

              
                Copy
              
            
          

Lai iegūtu lokālās krātuves elementu, varat izmantot komandu `cy.window()` un pēc tam metodi `localStorage.getItem()`. Piemēram:

            
cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

            

              
                Copy
              
            
          

Lai iestatītu sīkdatni, varat izmantot komandu `cy.setCookie()`. Piemēram:

            
cy.setCookie('myCookie', 'myCookieValue')

            

              
                Copy
              
            
          

Lai iegūtu sīkdatni, varat izmantot komandu `cy.getCookie()`. Piemēram:

            
cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

            

              
                Copy
              
            
          

Failu augšupielādes apstrāde

Cypress nodrošina spraudni ar nosaukumu `cypress-file-upload`, kas vienkāršo failu augšupielādi jūsu testos. Lai instalētu spraudni, izpildiet šādu komandu:

            npm install -D cypress-file-upload
            

              
                Copy
              
            
          

Pēc tam pievienojiet šādu rindu savam `cypress/support/commands.js` failam:

            
import 'cypress-file-upload';

            

              
                Copy
              
            
          

Pēc tam varat izmantot komandu `cy.uploadFile()`, lai augšupielādētu failu. Piemēram:

            
cy.get('input[type="file"]').attachFile('example.txt')

            

              
                Copy
              
            
          

Darbs ar IFrames

IFrames testēšana var būt sarežģīta, taču Cypress nodrošina veidu, kā ar tiem mijiedarboties. Jūs varat izmantot komandu `cy.frameLoaded()`, lai gaidītu IFrame ielādi, un pēc tam izmantot komandu `cy.iframe()`, lai iegūtu IFrame dokumenta objektu.

            
cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

            

              
                Copy
              
            
          

Cypress un nepārtraukta integrācija/nepārtraukta izvietošana (CI/CD)

Cypress integrēšana jūsu CI/CD cauruļvadā ir būtiska, lai nodrošinātu jūsu lietojumprogrammas kvalitāti. Jūs varat palaist Cypress testus headless režīmā savā CI/CD vidē. Lūk, kā:

1. Instalējiet Cypress: Pārliecinieties, ka Cypress ir instalēts kā jūsu projekta atkarība.
2. Konfigurējiet CI/CD: Konfigurējiet savu CI/CD cauruļvadu, lai pēc katras būves (build) palaistu Cypress testus.
3. Palaist Cypress Headless režīmā: Izmantojiet komandu `cypress run`, lai palaistu Cypress testus headless režīmā.

Piemērs CI/CD konfigurācijai (izmantojot GitHub Actions):

            
name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

            

              
                Copy
              
            
          

Šī konfigurācija palaidīs Cypress testus, ikreiz kad kods tiks nospiedts uz `main` zaru vai tiks izveidots pull pieprasījums pret `main` zaru. `cypress-io/github-action` darbība vienkāršo Cypress testu izpildes procesu GitHub Actions.

Cypress testu atkļūdošana

Cypress nodrošina izcilus atkļūdošanas rīkus, lai palīdzētu jums identificēt un novērst problēmas savos testos. Šeit ir daži padomi Cypress testu atkļūdošanai:

• Izmantojiet Cypress Test Runner: Cypress Test Runner nodrošina vizuālu saskarni jūsu testu izpildei un atkļūdošanai. Jūs varat iziet cauri saviem testiem pa vienai komandai, pārbaudīt lietojumprogrammas stāvokli un skatīt detalizētus kļūdu ziņojumus.
• Izmantojiet `cy.pause()` komandu: Komanda `cy.pause()` aptur jūsu testa izpildi un ļauj jums pārbaudīt lietojumprogrammas stāvokli pārlūkprogrammas izstrādātāju rīkos.
• Izmantojiet `cy.debug()` komandu: Komanda `cy.debug()` izdrukā izvēlēto elementu konsolē, ļaujot jums pārbaudīt tā rekvizītus un atribūtus.
• Izmantojiet pārlūkprogrammas izstrādātāju rīkus: Pārlūkprogrammas izstrādātāju rīki nodrošina daudz informācijas par jūsu lietojumprogrammu, ieskaitot DOM, tīkla pieprasījumus un konsoles žurnālus.
• Rūpīgi izlasiet kļūdu ziņojumus: Cypress nodrošina detalizētus kļūdu ziņojumus, kas var palīdzēt jums identificēt kļūdas cēloni. Pievērsiet uzmanību kļūdas ziņojumam un zvanu stivam (stack trace).

Cypress pret citām testēšanas sistēmām

Lai gan Cypress ir jaudīga pilna cikla testēšanas sistēma, ir svarīgi saprast, kā tā salīdzinās ar citām populārām iespējām. Šeit ir īss pārskats:

• Selenium: Selenium ir plaši izmantota automatizācijas testēšanas sistēma. Lai gan tā ir elastīga un atbalsta vairākas valodas, to var būt sarežģīti iestatīt un uzturēt. Cypress piedāvā vienkāršāku un izstrādātājiem draudzīgāku pieredzi, īpaši JavaScript balstītām lietojumprogrammām.
• Puppeteer: Puppeteer ir Node bibliotēka, kas nodrošina augsta līmeņa API, lai kontrolētu headless Chrome vai Chromium. Tā ir lieliska datu izvilkšanai (scraping) un pārlūkprogrammas uzdevumu automatizēšanai, taču pilna cikla testēšanai var būt nepieciešama vairāk manuālu konfigurāciju salīdzinājumā ar Cypress.
• Playwright: Playwright ir vēl viena Microsoft izstrādāta pārlūku automatizācijas sistēma. Tā ir līdzīga Puppeteer, taču piedāvā plašāku pārlūku atbalstu. Cypress ir unikāls laika ceļojumu atkļūdotājs un integrētāka testēšanas pieredze.

Sistēmas izvēle ir atkarīga no jūsu projekta specifiskajām vajadzībām un prasībām. Cypress ir lieliska izvēle modernām tīmekļa lietojumprogrammām, kurām nepieciešama ātra, uzticama un izstrādātājiem draudzīga pilna cikla testēšana.

Reāli Cypress piemēri darbībā

Apskatīsim dažus reālus piemērus tam, kā Cypress var tikt izmantots dažāda veida tīmekļa lietojumprogrammu testēšanai:

E-komercijas lietojumprogrammas testēšana

Jūs varat izmantot Cypress, lai testētu dažādas lietotāju plūsmas e-komercijas lietojumprogrammā, piemēram:

• Preču meklēšana
• Preču pievienošana grozam
• Norēķināšanās un pasūtījuma veikšana
• Konta iestatījumu pārvaldīšana

Šeit ir piemērs Cypress testam, kas pārbauda, vai lietotājs var veiksmīgi pievienot preci savam grozam:

            
it('Adds a product to the cart', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

            

              
                Copy
              
            
          

Sociālo mediju lietojumprogrammas testēšana

Jūs varat izmantot Cypress, lai testētu lietotāju mijiedarbību sociālo mediju lietojumprogrammā, piemēram:

• Jauna ieraksta izveidošana
• Ieraksta iecienīšana (like)
• Komentēšana pie ieraksta
• Citē citu lietotāju sekošana

Šeit ir piemērs Cypress testam, kas pārbauda, vai lietotājs var veiksmīgi izveidot jaunu ierakstu:

            
it('Creates a new post', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hello, world!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hello, world!')
})

            

              
                Copy
              
            
          

Banku lietojumprogrammas testēšana

Banku lietojumprogrammām Cypress var tikt izmantots, lai testētu kritiski svarīgas funkcijas, piemēram:

• Droša pieteikšanās
• Konta atlikumu pārbaude
• Līdzekļu pārskaitīšana
• Saņēmēju pārvaldīšana

Tests, lai pārbaudītu līdzekļu pārskaitījumu, varētu izskatīties šādi (ar atbilstošu imitāciju drošības nolūkos):

            
it('Transfers funds successfully', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

            

              
                Copy
              
            
          

Noslēgums

Cypress ir jaudīga un daudzpusīga pilna cikla testēšanas sistēma, kas var palīdzēt nodrošināt jūsu tīmekļa lietojumprogrammu kvalitāti un uzticamību. Tā izstrādātājiem draudzīgā API, jaudīgās funkcijas un izcilā veiktspēja padara to par populāru izvēli izstrādātāju un QA inženieru vidū visā pasaulē. Ievērojot šajā ceļvedī izklāstītos labākos principus, jūs varat rakstīt efektīvus Cypress testus, kas palīdzēs jums atklāt kļūdas agrīnā izstrādes procesā un piegādāt augstas kvalitātes programmatūru saviem lietotājiem.

Tā kā tīmekļa lietojumprogrammas turpina attīstīties, pilna cikla testēšanas nozīme tikai pieaugs. Cypress pieņemšana un integrēšana jūsu izstrādes darbplūsmā ļaus jums izveidot robustākas, uzticamākas un lietotājam draudzīgākas tīmekļa pieredzes.